<template>
  <div class="adminIndex">
      <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
          <el-menu-item @click="goProductList('1')" index="1">商品列表</el-menu-item>
          <el-menu-item @click="goOrderList('2')" index="2">订单列表</el-menu-item>
          <el-menu-item @click="goWareHouse('3')" index="3">待发货清单</el-menu-item>
          <el-menu-item @click="goUserList('4')" index="4">商城用户管理</el-menu-item>
          <el-menu-item @click="goLogList('5')" index="5">系统日志</el-menu-item>
          <el-menu-item @click="unLogin()" style="float: right;margin-right: 30px" index="6">退出登录</el-menu-item>
      </el-menu>
      <div class="contentArea">
          <keep-alive>
              <router-view v-if='$route.meta.keepAlive'/>
          </keep-alive>
          <router-view v-if='!$route.meta.keepAlive'/>
      </div>

  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import AdminApiActions from "@/components/api/admin-api-actions";

@Component
export default class AdminIndex extends Vue {
     @Prop() private msg!: string;
     //激活的菜单
     public activeIndex="1";
     //选中事件
     public handleSelect(event:Event){
         console.log("XX",event)
     }
     async created(){
         let result=await AdminApiActions.getUserInfo();
         if(!result.data){
             this.$router.push({
                 path: '/login',
             });
             return false;
         }
         let cacheKey=localStorage.getItem("cacheKey");
         if(cacheKey=="1"){
             this.activeIndex="1";
             this.$router.push({
                 path: '/productList',
             });
         }else if(cacheKey=="2"){
             this.activeIndex="2";
             this.$router.push({
                 path: '/orderList',
             });
         }else if(cacheKey=="3"){
             this.activeIndex="3";
             this.$router.push({
                 path: '/wareHouseList',
             });
         }else if(cacheKey=="4"){
             this.activeIndex="4";
             this.$router.push({
                 path: '/userList',
             });
         }else if(cacheKey=="5"){
             this.activeIndex="5";
             this.$router.push({
                 path: '/logList',
             });
         }

     }
     //跳转到商品列表
     public goProductList(key:any){
         localStorage.setItem("cacheKey",key);
         this.$router.push({
             path: '/productList',
         });
     }
     //跳转到订单列表
     public goOrderList(key:any){
         localStorage.setItem("cacheKey",key);
         this.$router.push({
             path: '/orderList',
         });
     }
     //跳转到仓库列表
     public goWareHouse(key:any){
         localStorage.setItem("cacheKey",key);
         this.$router.push({
             path: '/wareHouseList',
         });
     }
     //跳转到日志列表
     public goLogList(key:any){
         localStorage.setItem("cacheKey",key);
         this.$router.push({
             path: '/logList',
         });
     }
    public goUserList(key:any){
        localStorage.setItem("cacheKey",key);
        this.$router.push({
            path: '/userList',
        });
    }

    /**
     * 退出登录
     */
    public async unLogin(){
        let result=await AdminApiActions.unLogin();
        this.$router.push({
            path: '/login',
        });
    }
}
</script>
<style lang="less">
    .adminIndex{
        height: 100%;
        .contentArea{
            height:calc(100% - 80px);
        }
    }
    .el-menu-demo{
        background-color: skyblue!important;
    }
    .el-menu-item{
        background-color: skyblue!important;
    }

</style>
